<template>
    <div class="detail-page">
        <div style="background: #ececec; padding: 20px">
            <a-card :title="New?.title" :bordered="false" style="width: 100%; height: 100%;">
                <p>
                <div>作者:{{ New?.admin?.account }}</div>
                <div>时间:{{ dayjs(New?.createdAt).format('YYYY-MM-DD') }}</div>
                </p>
                <hr>
                <h2>封面</h2>
                <p class="images">
                    <img class="img" :src="New?.image" alt="">
                </p>
                <hr>
                <h1 style="text-align: center; font-size: large;">{{ New?.title }}</h1>
                <p v-html="New?.content"></p>
            </a-card>
        </div>
    </div>
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IDetail } from '@/types/table'

const route = useRoute()
const New = ref<IDetail>()
onMounted(async () => {
    if (route.query.posts) {
        const res = await getOnePost(Number(route.params.id))
        New.value = res.data.post
    } else {
        const res = await getOneNews(Number(route.params.id))
        New.value = res.data.news
    }
})

</script>

<style scoped lang="less">
.images {
    display: flex;
    justify-content: center;

    .img {
        width: 500px;
        height: 300px;
        display: block;
    }
}
</style>